<template>
    <div>

        <div class="info_cell">
            <img src="@/assets/img/icon_phone number@2x.png" alt="">
            <input placeholder="请输入手机号" v-model="phone" maxlength="11" type="number">
        </div>
        <div class="info_cell info_cell_code">
            <img src="@/assets/img/icon_captcha@2x.png" alt="">
            <input placeholder="请输入验证码" @input="changeauthCd" v-model="code" maxlength="6" type="number"
                style="width:calc(100% - 8.25rem)">


            <span @click="getCode" v-if="sending == false" class="span1">获取验证码</span>
            <span v-else class="span2">重新发送({{ time }})</span>
        </div>

        <div class="affirmBtn" @click="ChangeNewPhone">
            确定
        </div>

    </div>
</template>
<script>
import { updatePhone, sendPhoneCode } from '@/api/api'
export default {
    components: {},
    data() {
        return {
            phone: "",
            code: "",
            sending: false,
            time: 60,
            myreg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        }
    },
    methods: {
        ChangeNewPhone() {
            const data = {
                phone: this.phone,
                code: this.code,
            }
            updatePhone(data).then(res => {
                if (res.code == 200) {
                    this.$vux.toast.show("更换成功,请重新登录")
                    this.$router.replace({ path: '/' })
                }
            })
        },
        getCode() {
            const data = {
                phone: this.phone,
                type: "CODE"
            }
            sendPhoneCode(data).then(res => {
                if (res.code == 200) {
                    this.sending = true
                    this.countDown()
                }
            })

        },
        changeauthCd() {
            if (this.code.length > 6) {
                this.code = this.code.slice(0, 6)
            }
        },
        // 倒计时方法
        countDown() {
            if (this.time === 0) {
                this.sending = false
                this.time = 60
                return
            } else {
                this.sending = true;
                this.time--
            }
            setTimeout(() => {
                this.countDown()
            }, 1000)
        },
        emptyPhone() {
            this.phone = ""
        },

        emptyCode() {
            this.code = ""
        },

    },
}
</script>
<style scoped>
.info_cell {
    display: flex;
    align-items: center;
    width: calc(100% - 2rem);
    padding: 1.125rem 0px;
    margin: 0px 1rem;


}

.info_cell input {
    border: none;
    width: calc(100% - 2.5625rem);
    padding-left: 0.6875rem;
    height: 2.75rem;
    font-size: 0.9375rem;
    outline: none;
    background-color: #F7FAFD;
}

.info_cell_code span {
    background-color: #F7FAFD;
    width: 6.25rem;
    height: 2.75rem;
    color: #579AFF;
    line-height: 2.75rem;
    padding-right: 0.6875rem;
}

.info_cell_code .span2 {
    /* border: 1px solid #949FB4; */
    color: #949FB4;

}

.info_cell img:nth-of-type(1) {
    display: block;
    width: 0.9375rem;
    height: 1.25rem;
    margin-right: 0.9375rem;
    object-fit: contain;
}

.affirmBtn {
    width: calc(100% - 2rem);
    height: 2.75rem;
    background: linear-gradient(90deg, rgba(68, 142, 255, 1) 0%, rgba(102, 163, 255, 1) 100%);
    border-radius: 0.1875rem;
    text-align: center;
    line-height: 2.75rem;
    color: #fff;
    font-size: 1.125rem;
    margin: 0px 1rem;
    margin-top: 8.5rem;
}
</style>